<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>BIBO {:__('Official network')}</title>
	<script type="text/javascript">
			//适配移动端
		function resize() {
			var deviceWidth = document.documentElement.clientWidth;
			if (deviceWidth < 240) deviceWidth = 240;
				document.documentElement.style.cssText = 'font-size:' + (deviceWidth / 15) + 'px!important';
		}
		window.addEventListener('resize', resize);
		//	$(document).on('resize',resize)
		resize();
	</script>
	<!--[if !IE]>-->
  		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		<script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
		<link rel="shortcut icon" href="__CDN__/assets/img/bibo.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="__CDN__/assets/libs/bootstrap/dist/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="__CDN__/assets/css/test.css"/>
  	<!--<![endif]-->
	<!--[if lt IE 9]>
		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  		<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  	<![endif]-->
  	<!--[if gt IE 8]>
  		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  		<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  		<script src="__CDN__/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
  		<link rel="shortcut icon" href="__CDN__/assets/img/bibo.ico" type="image/x-icon">
		<link rel="stylesheet" type="text/css" href="__CDN__/assets/libs/bootstrap/dist/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="__CDN__/assets/css/test2.css"/>
  	<![endif]-->
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">   
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle = "collapse"  data-target="#navbar">
                    
                </button>
                <a class="navbar-brand">
                	<img class="hidden-xs logo1" src="__CDN__/assets/img/helper/logo_2.png"/>
                	<img class="visible-xs" src="__CDN__/assets/img/helper/logo_1.png"/>
                </a>
            </div>
            <div id="navbar"  class="collapse navbar-collapse">
                <ul class="nav navbar-nav"> 
                    <li><a href="javascript:void(0);">{:__('Home')}</a></li>
                    <li><a href="#main">{:__('Function')}</a></li>
                    <li><a href="#inst">{:__('Enter')}</a></li>
                    <li><a href="{:url('helper/index')}">{:__('Helper')}</a></li>
                </ul>
            </div>
            <div class="hidden-xs downLoad"><a href="">Download APP</a></div>
            <div class="cutLan">
				<span><?php if($config['language']=='zh-cn'){echo "中文";}elseif($config['language']=='en'){echo "EN";} ?></span>
            	<img class="selectLan hidden-xs" src="__CDN__/assets/img/helper/arrow_1.png" alt="" />
            	<img class="selectLan visible-xs" src="__CDN__/assets/img/helper/mobile/VectorSmartObject@2x.png" alt="" />
            </div>
        </div>
    </nav>
    <div class="lan">
		<div><a href="?ref=home/helper&lang=en">EN</a></div>
		<div><a href="?ref=home/helper&lang=zh-cn">中文</a></div>
    </div>
    <div class="container-fluid header">
    	<img class="img-responsive header-bc hidden-xs" src="__CDN__/assets/img/helper/home_banner_bg.png"/>
    	<img class="img-responsive header-bc visible-xs" src="__CDN__/assets/img/helper/mobile/bg_banner@2x.png"/>
    	<div class="headerSec">
    		<h1>{:__('Safe and huge')}</h1>
    		<p>{:__('The origin of the wallet')}</p>
    		<div><img class="iosImg" src="__CDN__/assets/img/helper/icon_banner_ios_hl.png"/>&nbsp;<span>IOS {:__('Download')}</span></div>
    		<section><img class="andImg" src="__CDN__/assets/img/helper/icon_banner_Android_nor.png"/>&nbsp;<span>Android {:__('Download')}</span></section>
    	</div>
    	<img class="img-responsive header-mobile" src="__CDN__/assets/img/helper/mobile_screen.png"/>
    </div>
    <div class="main" id="main">
    	<div class="container-fluid">
    		<div class="main1">
    			<h1>{:__('Multi-asset management')}</h1>
    			<div class="main1Sec">
    				<div class="">
	    				<img class="img-responsive" src="__CDN__/assets/img/helper/icon_mod01_1_zc.png"/>
	    				<h3>{:__('Support for multiple')}</h3>
	    				<p>{:__('Support one')}</p>
	    			</div>
	    			<div class="">
	    				<img class="img-responsive" src="__CDN__/assets/img/helper/icon_mod01_2_hq.png"/>
	    				<h3>{:__('Mining value')}</h3>
	    				<p>{:__('Value one')}</p>
	    			</div>
	    			<div class="">
	    				<img class="img-responsive" src="__CDN__/assets/img/helper/icon_mod01_3_gl.png"/>
	    				<h3>{:__('Multi-functional')}</h3>
	    				<p>{:__('Function one')}</p>
	    			</div>
    			</div>
    		</div>
    		<div style="clear: both;width: 0;height: 0;padding: 0;margin: 0;"></div>
    		<div class="main2">
    			<div class="main2Sec">
    				<h1>{:__('SPS')}</h1>
    				<p>{:__('Private-key')}</p>
    				<p>{:__('A-set')}</p>
    				<p>{:__('Multi-signature')}</p>
    				<p>{:__('The-team')}</p>
    			</div>
    			<img class="img-responsive" src="__CDN__/assets/img/helper/image_mod02_cards.png"/>
    		</div>
    		<div style="clear: both;width: 0;height: 0;padding: 0;margin: 0;"></div>
    		<div class="container main3">
    			<img class="img-responsive" src="__CDN__/assets/img/helper/image_mod03_1_mobile.png"/>
    			<div class="carousel slide" id="mycarousel" data-ride="carousel">
	               <ul class="carousel-indicators" id="dian"> 
	                    <li class="active" data-target="#mycarousel" data-slide-to="0"></li>
	                    <li  data-target="#mycarousel"  data-slide-to="1"></li>
	               </ul>
		            <div class="carousel-inner">
		                <div class="item active">
		                    <img src="__CDN__/assets/img/helper/image_mod03_1_skm.png" alt="" style="width: 100%">
		                </div>
		                <div class="item">
		                    <img src="__CDN__/assets/img/helper/image_mod03_1_zz.png" alt="" style="width: 100%">
		                </div>
		            </div>
	            </div>
    			<div class="main3Sec" id="bjzz">
    				<h1>{:__('Convenient payment')}</h1>
    				<p>{:__('Use QR')}</p>
    				<p>{:__('Seamless and seamless')}</p>
    				<p>{:__('Clearly-check')}</p>
    			</div>
    		</div>
    	</div>
    </div>
    <div class="value" id="value">
		<div class="value-sec1"><h1>{:__('Value mining')}</h1></div>
		<div class="value-sec2">
			<div>
				<p>{:__('The-trend')}</p>
				<p>{:__('Multi-dimensional')}</p>
				<p>{:__('Combine-information')}</p>
				<p>{:__('In the midst')}</p>
			</div>
			<img class="img-responsive" src="__CDN__/assets/img/helper/image_mobile_hq.png"/>
		</div>
    </div>
	
	<div class="inst" id="inst">
		<h1>{:__('How to use')}</h1>
		<p>{:__('The currency industry')}</p>
		<div class="instDiv">
			<div class="instSec1">
				<img src="__CDN__/assets/img/helper/icon_use_1_download.png"/>
				<h2>{:__('Download BIBO Wallet')}</h2>
				<p>{:__('Choose the version')}</p>
			</div>
			<div class="instSec2">
				<section class="">
					<img src="__CDN__/assets/img/helper/icon_use_2_set.png"/>
					<h3>{:__('Create or import')}</h3>
					<p class="instSec2-p1">{:__('Create a new')}</p>
					<p class="instSec2-p2">{:__('Generate a new')}</p>
				</section>
				<section>
					<img src="__CDN__/assets/img/helper/icon_use_3_bibo.png"/>
					<h3>{:__('Enjoy BIBO')}</h3>
					<p class="instSec2-p3">{:__('Immediately open CAM')}</p>
				</section>
			</div>
		</div>
	</div>
	<div class="exper">
		<h1>{:__('Real experience')}</h1>
		<p>{:__('A wallet app')}</p>
		<div><a href="#">Download App</a></div>
	</div>
	<footer>
		<hr />
		<div class="footer">
			<!--<div class="container-fluid">-->
				<!--<div class="row">-->
					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 address">2018© bibowallet.com</div>
					<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 link">
						<a href="https://twitter.com/CAM_Blockchain" target="_blank"><img src="__CDN__/assets/img/helper/icon-footer-01-twitter.png" alt="twitter" /></a>
						<a href="https://www.facebook.com/CAMBlockChain" target="_blank"><img class="fff" src="__CDN__/assets/img/helper/icon-footer-02-facebook.png" alt="facebook" /></a>
						<a href="https://0.plus/CAMBlockchain" target="_blank"><img src="__CDN__/assets/img/helper/icon-footer-03-telegram.png" alt="telegram" /></a>
						<a href="https://medium.com/@CAMBlockChain" target="_blank"><img src="__CDN__/assets/img/helper/icon-footer-04-medium.png" alt="medium" /></a>
						<a href="https://github.com/camchain" target="_blank"><img src="__CDN__/assets/img/helper/icon-footer-05-github.png" alt="github" /></a>
						<a href="https://weibo.com/u/6420206930" target="_blank"><img src="__CDN__/assets/img/helper/icon-footer-06-microblog.png" alt="weibo" /></a>
					</div>
				<!--</div>-->
			<!--</div>-->
		</div>
	</footer>
	
	<!--遮罩层-->
	<div id="screen">
		<div class="screen_sc">
			<img class="screen_bc visible-sm-block visible-md-block visible-lg-block" src="__CDN__/assets/img/helper/pop_ims.png"/>
			<img class="screen_bc visible-xs-block" src="__CDN__/assets/img/helper/pop_ims.png"/>
			<img class="screen_btn" src="__CDN__/assets/img/helper/pop_btn.png"/>
			<img class="screen_close" src="__CDN__/assets/img/helper/close_default.png"/>
			<a href="{:url('activity/download')}" target="_blank"><p class="screen_cj">立即参加</p></a>
		</div>
	</div>

</body>
</html>
<script type="text/javascript">

//页面DOM结构绘制完成后执行
$(document).ready(function(){
	$('#screen').fadeIn(0);
	//使得用户无法滚动
	document.documentElement.style.overflow = 'hidden';
	
	var ScrTop = document.documentElement.scrollTop || document.body.scrollTop;
	if(ScrTop > 0){
				$('.navbar').css({
					backgroundColor: "#FFFFFF",
					boxShadow:"0 10px 25px rgba(0,52,74,0.18)"
				});
				$(".navbar a").css("cssText", "color:#333333 !important;");
				$(".navbar span").css("cssText", "color:#333333 !important;");
				$('.logo1').attr('src','__CDN__/assets/img/helper/logo_1.png');
				$('.selectLan').attr('src','__CDN__/assets/img/helper/arrow_2.png');
				$('.downLoad').css({
					color: "#ffffff"
				});
				$('.downLoad>a').css("cssText", "color:#ffffff !important;");
				$('.downLoad').addClass('downloadBc');
				$('.navbar-nav a').hover(function(){
					$(this).css("cssText", "color:#357FFA !important;");
				},function(){
					$(this).css("cssText", "color:#333333 !important;")
				})
			}else{
				$('.navbar').css({
					backgroundColor: "rgba(0,0,0,0)",
					boxShadow:"0 0 0 rgba(0,0,0,0)"
				});
				$(".navbar a").css("cssText", "color:#ffffff !important;");
				$(".navbar span").css("cssText", "color:#ffffff !important;");
				$('.logo1').attr('src','__CDN__/assets/img/helper/logo_2.png');
				$('.selectLan').attr('src','__CDN__/assets/img/helper/arrow_1.png');
				$('.downLoad').css({
					backgroundColor: "#FFFFFF",
					color: "#357ffa"
				});
				$('.downLoad>a').css("cssText", "color:#357ffa !important;");
				$('.downLoad').removeClass('downloadBc');
				$('.navbar-nav a').hover(function(){
					$(this).css("cssText", "color:#357FFA !important;");
				},function(){
					$(this).css("cssText", "color:#ffffff !important;")
				})
			}
});
    	
// 页面刷新回到最顶部
//$(function(){
//	function scrollTop(){
//	    $('html , body').animate({scrollTop: 0},'fast');
//	} 
//	scrollTop()
//});

$(".headerSec div").hover(function() {
	$(".headerSec div").css({
		backgroundColor: "#FFFFFF",
		color: "#357ffa",
		border: "1px solid #FFFFFF",
		boxShadow:"0 10px 25px rgba(0,52,74,0.18)"
	});

	$(".headerSec section").css({
		backgroundColor: "rgba(0,0,0,0)",
		color: "#FFFFFF",
		border: "1px solid #FFFFFF",
		boxShadow:"0 10px 25px rgba(0,0,0,0)"
	});
	$('.iosImg').attr('src','__CDN__/assets/img/helper/icon_banner_ios_hl.png');
	$('.andImg').attr('src','__CDN__/assets/img/helper/icon_banner_Android_nor.png');
}, function() {
	$(".headerSec div").css({
		backgroundColor: "rgba(0,0,0,0)",
		color: "#FFFFFF",
		border: "1px solid #FFFFFF",
		boxShadow:"0 10px 25px rgba(0,0,0,0)"
	});
	$('.iosImg').attr('src','__CDN__/assets/img/helper/icon_banner_ios_nor.png');
	$('.andImg').attr('src','__CDN__/assets/img/helper/icon_banner_Android_nor.png');
});

$(".headerSec section").hover(function() {
	$(".headerSec section").css({
		backgroundColor: "#FFFFFF",
		color: "#357ffa",
		border: "1px solid #FFFFFF",
		boxShadow:"0 10px 25px rgba(0,52,74,0.18)"
	});

	$(".headerSec div").css({
		backgroundColor: "rgba(0,0,0,0)",
		color: "#FFFFFF",
		border: "1px solid #FFFFFF",
		boxShadow:"0 10px 25px rgba(0,0,0,0)"
	});
	$('.andImg').attr('src','__CDN__/assets/img/helper/icon_banner_Android_hl.png');
	$('.iosImg').attr('src','__CDN__/assets/img/helper/icon_banner_ios_nor.png');
}, function() {
	$(".headerSec section").css({
		backgroundColor: "rgba(0,0,0,0)",
		color: "#FFFFFF",
		border: "1px solid #FFFFFF",
		boxShadow:"0 10px 25px rgba(0,0,0,0)"
	});
	$('.iosImg').attr('src','__CDN__/assets/img/helper/icon_banner_ios_nor.png');
	$('.andImg').attr('src','__CDN__/assets/img/helper/icon_banner_Android_nor.png');
});
window.addEventListener('scroll',function(){
		var windowWidth = window.innerWidth; 
		var ScrTop = document.documentElement.scrollTop || document.body.scrollTop;
		console.log(ScrTop)
		if(windowWidth > 750){
			if(ScrTop > 0){
				console.log('12121212')
				$('.navbar').css('background-color','#FFFFFF');
				$('.navbar').css('box-shadow','0 10px 25px rgba(0,52,74,0.18)');
				
				$(".navbar a").css("cssText", "color:#333333 !important;");
				$(".navbar span").css("cssText", "color:#333333 !important;");
				$('.logo1').attr('src','__CDN__/assets/img/helper/logo_1.png');
				$('.selectLan').attr('src','__CDN__/assets/img/helper/arrow_2.png');
				$('.downLoad').css("color", "#ffffff");
				$('.downLoad>a').css("cssText", "color:#ffffff !important;");
				$('.downLoad').addClass('downloadBc');
				$('.navbar-nav a').hover(function(){
					$(this).css("cssText", "color:#357FFA !important;");
				},function(){
					$(this).css("cssText", "color:#333333 !important;")
				})
			}else{
				$('.navbar').css('background-color','rgba(0,0,0,0)');
				$('.navbar').css('box-shadow','0 0 0 rgba(0,0,0,0)');
				
				$(".navbar a").css("cssText", "color:#ffffff !important;");
				$(".navbar span").css("cssText", "color:#ffffff !important;");
				$('.logo1').attr('src','__CDN__/assets/img/helper/logo_2.png');
				$('.selectLan').attr('src','__CDN__/assets/img/helper/arrow_1.png');
				$('.downLoad').css('background-color',"#FFFFFF")
				$('.downLoad').css('color',"#357ffa")
				$('.downLoad>a').css("cssText", "color:#357ffa !important;");
				$('.downLoad').removeClass('downloadBc');
				$('.navbar-nav a').hover(function(){
					$(this).css("cssText", "color:#357FFA !important;");
				},function(){
					$(this).css("cssText", "color:#ffffff !important;")
				})
			}
		}
		
});

var isBegin = false;
$('.navbar-header button').click(function(){
	if(isBegin == false){
		$('.navbar-header button').css({
			width:"0.76rem",
			height:"0.76rem",
			top:"0.74rem",
			backgroundImage:'url(__CDN__/assets/img/helper/mobile/xz4.png)',
			backgroundSize:"90%90%",
			backgroundPosition:"center",
			backgroundColor: '#ffffff'
		});
		$('#navbar').slideDown(250)
	}else{
		$('.navbar-header button').css({
			width:"0.76rem",
			height:"0.6rem",
			top:"0.83rem",
			backgroundImage:'url(__CDN__/assets/img/helper/mobile/icon_nav.png)',
			backgroundSize:"90%90%",
			backgroundPosition:"center",
			backgroundColor: '#ffffff'
		});
		$('#navbar').slideUp(250)
	}
	isBegin = !isBegin
});

//$('.cutLan').click(function(){
//	//取消事件冒泡 
////    event.stopPropagation();  
//	$('.lan').slideToggle(500);
//});

//点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
    $(document).click(function(event){
        var _con = $('.lan');  // 设置目标区域
        if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
           //$('#divTop').slideUp('slow');  //滑动消失
           $('.lan').slideUp(500);   //淡出消失
        }
   });


// 点击空白处弹出框要隐藏掉
$('#screen').click(function() {
	$('#screen').fadeOut(200);
	//使得用户可以滚动
	document.documentElement.style.overflow = 'auto';
});

$('.screen_close').hover(function(){
	$('.screen_close').attr('src','__CDN__/assets/img/helper/close_hover.png');
},function(){
	$('.screen_close').attr('src','__CDN__/assets/img/helper/close_default.png');
});

// 点击关闭按钮弹出框要隐藏掉
$('.screen_close').click(function() {
	$('#screen').fadeOut(200);
	//使得用户可以滚动
	document.documentElement.style.overflow = 'auto';
});

//"参加活动"按钮鼠标停留样式
$('.screen_cj').hover(function() {
	$('.screen_btn').attr('src', '__CDN__/assets/img/helper/pop_btn_1.png')
}, function() {
	$('.screen_btn').attr('src', '__CDN__/assets/img/helper/pop_btn.png')
});

var isBegin5 = false;
$('.navbar-nav').each(function(index,elem){
	$(this).click(function(e){
		$('#navbar').slideUp(250);
		if(isBegin5 == false){
			$('.navbar-header button').css({
				width:"0.76rem",
				height:"0.58rem",
				top:"0.83rem",
				backgroundImage:'url(__CDN__/assets/img/helper/mobile/icon_nav.png)',
				backgroundColor: '#ffffff'
			})
		}else{
			$('.navbar-header button').css({
				width:"0.76rem",
				height:"0.76rem",
				top:"0.74rem",
				backgroundImage:'url(__CDN__/assets/img/helper/mobile/xz4.png)',
				backgroundColor: '#ffffff'
			})
		}
	})
})
</script>